<template>
  <div class="postView">
    <div class="top">
      <!--左边导航栏开始-->
      <div class="top-left">
        <h1>车友圈</h1>
      </div>
      <!--左边导航栏结束-->
    </div>
    <div class="box">
      <div class="input">
        <div class="box1">
          <div class="personInfo">
            <div class="louzhu">
              <span class="lou">楼主</span>
            </div>
            <!--头像开始-->
            <div class="pic">
              <img :src="avatar == '默认头像' ? avatar_url : this.api_url + post_data.avatar" alt="" />
            </div>
            <!--头像结束-->
            <!--个人资讯开始-->
            <div>
              <a href="" style="text-decoration: none; color: black">{{post_data.nickname}}</a>
            </div>
            <!--个人资讯结束-->
      
            <!---->
            <div class="personState">
              <div >
                <span>{{this.post_data.followCount}}</span
                ><br />
                <span style="font-size: x-small">关注</span>
              </div>
                <div >
                <span>{{this.post_data.followedCount}}</span
                ><br />
                <span style="font-size: x-small">粉丝</span>
              </div>
                <div >
                <span>{{this.post_data.postCount}}</span
                ><br />
                <span style="font-size: x-small">帖子</span>
              </div>
                <div >
                <span>{{this.post_data.star}}</span
                ><br />
                <span style="font-size: x-small">收藏</span>
              </div>
            </div>
          </div>
          <div class="post">
            <h2>xxxxxxx</h2>
            <span></span><br />
            <p>
              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            </p>
            <h2>车系</h2>
          </div>
        </div>
        <div class="comment-container">
          <div class="box1" v-for="i in 2" :key="i">
            <div class="personInfo">
              <!--头像开始-->
              <div class="pic">
                <img src="../../assets/logo.png" alt="" />
              </div>
              <!--头像结束-->
              <!--个人资讯开始-->
              <div>
                <a href="" style="text-decoration: none; color: black"
                  >xxx资讯</a
                >
              </div>
              <!--个人资讯结束-->
              <!--徽章开始-->
              <div>
                <i class="el-icon-edit"></i>
                <i class="el-icon-edit"></i>
              </div>
              <!--徽章结束-->
              <!---->
              <div class="personState">
                <div v-for="b in arr2" :key="b">
                  <span>{{ b.point }}</span
                  ><br />
                  <span style="font-size: x-small">{{ b.title }}</span>
                </div>
              </div>
            </div>
            <div class="post">
              <h2>xxxxxxx</h2>
              <span></span><br />
              <p>
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
              </p>
              <h2>车系</h2>
              <el-card style="background-color: yellow"></el-card>
              <div class="right2" v-for="i in 4" :key="i">
                <span>张振坤，你是我的神</span>
                <div class="answer">
                  <el-tag size="mini">标签一</el-tag>
                  <span style="font-size: small">4次回答</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <el-button
          style="
            background-color: #2c3e50;
            width: 15vw;
            height: 7vh;
            color: white;
            margin-bottom: 14px;
          "
          >发动态</el-button
        >
        <div class="dis">
          <div class="right2" v-for="i in 2" :key="i">
            <span>张振坤，你是我的神</span>
            <div class="answer">
              <el-tag size="mini">标签一</el-tag>
              <span style="font-size: small">4次回答</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "PostView",
   computed: {
    ...mapState([
      "avatar_url",
      "phone",
      "avatar",
      "nickname",
      "api_url",
      "token",
    ]),
  },
  data() {
    return {
   
      arr2: [
        { point: this.followCount, title: "关注" },
        { point: 0, title: "粉丝" },
        { point: 0, title: "帖子" },
        { point: 243, title: "收藏" },
      ],
      post_data: {
        nickname: "云南昆明车友",
        avatar: "/SystemData/c83ed0a6911048e1bf59aa596efc6e4f.jpg",
        followCount: 0,
        followedCount: 0,
        postCount: 0,
        star: 0,
        list: [
          {
            id: 1,
            content: "我在长春 定了车 也在想冬天充电和续航问题",
            gmtCreate: "2022-06-25T20:06:08",
            gmtModified: "2022-06-29T22:12:15",
          },
          {
            id: 2,
            content: "续航掉一半",
            gmtCreate: "2022-06-25T20:12:21",
            gmtModified: "2022-06-29T22:12:40",
            likeCount: 0,
          },
          {
            id: 3,
            content: "东北就算了，尤其高速行驶，基本保不住电，随时可能趴窝！",
            gmtCreate: "2022-06-29T22:23:50",
            gmtModified: "2022-06-29T22:23:50",
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.box1 {
  display: flex;
  flex-direction: row;
  margin-bottom: 2vh;
}
* {
  margin: 0;
  padding: 0;
}

.answer {
  display: flex;
  justify-content: space-between;
  margin: 12px;
}

.input {
  display: flex;
  flex-direction: column;
}
.louzhu {
  background-color: #34373c;
  color: white;
  width: 70px;
  height: 35px;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  position: relative;
}
.lou {
  position: absolute;
  left: 12px;
  top: 4px;
}
.right2 {
  background-color: blueviolet;
  margin-bottom: 12px;
  text-align: left;
}
.postView {
  background-color: #eee;
  width: 80vw;
  margin: 0 auto;
}
.top {
  height: 8vh;
  position: relative;
}
.top .top-left {
  background-color: #fff;
  position: absolute;
  /*width: 10vw;*/
  /*height: 5vh;*/
  left: 3vw;
  top: 1vh;
}
.top .top-right {
  background-color: #fff;
  position: absolute;
  /*width: 10vw;*/
  height: 5vh;
  right: 3vw;
  top: 1vh;
}
.box {
  display: flex;
  justify-content: space-around;
}

.box .personInfo {
  background-color: #9f9a9a;
  width: 12vw;
}
.box .post {
  background-color: #fff;
  width: 48vw;
  display: block;
  float: left;
}
.box .item {
  display: flex;
  flex-direction: column;
}
.box .item .topic {
  background-color: #fff;
  width: 15vw;
  height: 10vh;
  margin-bottom: 2vh;
}
.box .item .dis {
  background-color: #fff;
  width: 15vw;

  margin-bottom: 2vh;
}
.top-right,
.personState {
  display: flex;
  /*justify-content:center;*/
  align-items: center; /*垂直居中*/
}
.top-right div {
  float: left;
  overflow: hidden;
  margin: 5px;
}

.personState {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px;
}
.pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px auto;
  overflow: hidden;
  background-color: yellow;
}
.pic img {
  width: 100%;
  height: 100%;
}
.post {
  text-align: left;
}
</style>
